<!Doctype html>
<html>

<head>
    <title>oixan的博客</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html" charset="utf-8">
    <link rel="stylesheet" type="text/css" href="../css/blog.css">
    <script src="./bjs/cryptojs.js"></script>
</head>

<body>
    <div class="head">
        <div class="headnav">
            <div class="naveframe">
                <ul class="navlist">
                    <li>
                        <a href="../index.html">
                            主页
                        </a>
                    </li>
                    <li>
                        <a href="../bloglist.html">
                            博客
                        </a>
                    </li>
                    <li>
                        <a href="../about.html">
                            关于
                        </a>
                    </li>
                </ul>
            </div>
        </div>

        <div class="headtext">
            <div class="headtext1">世界很简单，人类很复杂。</div>
            <div class="headtext2">浮生若梦，寻寻觅觅。</div>
        </div>
    </div>

    <div class="contents-all">
        <div class="contents">

            <div class="frame">
                <div class="title">
                    <h3>css旋转加载效果</h3>
                </div>
                <div class="dtime">时间：2021-04-16</div>
                <div class="detail" id='detail'>


                    <style>
                        #zhengwen {
                            margin-top: 10%;
                        }

                    </style>

                  

                    <div id='zhengwen'></div>

                    <style>
                        #preloader {
                            position: relative;
                            top: 0;
                            left: 0;
                            width: 100%;
                            height: 100%
                        }

                        #loader {
                            display: block;
                            position: relative;
                            left: 20%;
                            top: 50%;
                            width: 150px;
                            height: 150px;
                            margin: -75px 0 0 -75px;
                            border-radius: 50%;
                            border: 3px solid transparent;
                            border-top-color: #9370db;
                            -webkit-animation: spin 2s linear infinite;
                            animation: spin 2s linear infinite
                        }

                        #loader:before {
                            content: '';
                            position: absolute;
                            top: 5px;
                            left: 5px;
                            right: 5px;
                            bottom: 5px;
                            border-radius: 50%;
                            border: 3px solid transparent;
                            border-top-color: #ba55d3;
                            -webkit-animation: spin 3s linear infinite;
                            animation: spin 3s linear infinite
                        }

                        #loader:after {
                            content: '';
                            position: absolute;
                            top: 15px;
                            left: 15px;
                            right: 15px;
                            bottom: 15px;
                            border-radius: 50%;
                            border: 3px solid transparent;
                            border-top-color: #f0f;
                            -webkit-animation: spin 1.5s linear infinite;
                            animation: spin 1.5s linear infinite
                        }

                        @-webkit-keyframes spin {
                            0% {
                                -webkit-transform: rotate(0deg);
                                -ms-transform: rotate(0deg);
                                transform: rotate(0deg)
                            }

                            100% {
                                -webkit-transform: rotate(360deg);
                                -ms-transform: rotate(360deg);
                                transform: rotate(360deg)
                            }
                        }

                        @keyframes spin {
                            0% {
                                -webkit-transform: rotate(0deg);
                                -ms-transform: rotate(0deg);
                                transform: rotate(0deg)
                            }

                            100% {
                                -webkit-transform: rotate(360deg);
                                -ms-transform: rotate(360deg);
                                transform: rotate(360deg)
                            }
                        }
                    </style>
                    </style>
                    <div id='preloader'>
                        <div id='loader'></div>
                    </div>



                    
                </div>
                <a href="javascript:void(0)" onclick="showPg()">返回</a>
            </div>


        </div>
    </div>
    <div class="footer">
        <div class="footertext">©2018,oixan博客</div>
    </div>
    <span id="backtop" onclick="topFunction()">返回顶部</span>
</body>
<script src="../js/fanhuiye.js"></script>

</html>